<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      #app {
        .app-title {
          text-align: center;
        }
        .app-search {
          box-sizing: border-box;
          padding: 10px;
          border: 1px solid rgb(223, 192, 244);
          #unitSearch {
            padding: 6px;
          }
          #search {
            width: 80px;
            height: 30px;
            margin-left: 10px;
          }
        }
        .app-form {
          box-sizing: border-box;
          padding: 10px;
          border: 1px solid rgb(223, 192, 244);
          margin-top: 10px;
          input {
            width: 100px;
            height: 25px;
            margin-right: 20px;
          }
          select {
            height: 30px;
            margin-right: 20px;
          }
          #add {
            width: 80px;
            height: 30px;
            margin-left: 10px;
          }
        }
        .tablelist {
          margin-top: 10px;
          width: 100%;
          border: 1px solid rgb(223, 192, 244);
          border-collapse: collapse;
          thead {
            tr {
              background-color: pink;
            }
          }
          tr {
            height: 40px;
            text-align: center;
            input {
              height: 25px;
            }
            select {
              height: 30px;
            }
            td {
              a {
                text-decoration: none;
                padding: 5px;
                background-color: pink;
                color: cornflowerblue;
                border: solid 1px cornflowerblue;
              }
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 class="app-title">捐赠管理</h1>
      <div class="app-search">
        受捐单位：
        <select name="" id="unitSearch">
          <option value="">请选择</option>
          <option value="壹基金">壹基金</option>
          <option value="中华慈善总会">中华慈善总会</option>
        </select>
        <button id="search">查询</button>
      </div>
      <div class="app-form">
        <label class="name" for="">
          捐赠人：
          <input type="text" id="name" />
        </label>
        <label class="unit" for="">
          受捐单位：
          <select name="" id="unit">
            <option value="">请选择</option>
            <option value="壹基金">壹基金</option>
            <option value="中华慈善总会">中华慈善总会</option>
          </select>
        </label>
        <label class="money" for="">
          金额：
          <input type="text" id="money" />
        </label>
        <label class="date" for="">
          受捐日期：
          <input type="text" id="date" />
        </label>
        <button id="add">新增</button>
      </div>
      <table class="tablelist" border>
        <thead>
          <tr>
            <th>序号</th>
            <th>捐赠人</th>
            <th>受捐单位</th>
            <th>金额</th>
            <th>受捐日期</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <script>
      var data = JSON.parse(localStorage.getItem("data")) || [
        {
          id: 0,
          name: "沙龙1",
          unit: "壹基金",
          money: 2000,
          date: "2012-07-08",
          isEdit: false,
          isDelete: false,
          isQuery: true,
        },
        {
          id: 1,
          name: "沙龙2",
          unit: "中华慈善总会",
          money: 2000,
          date: "2012-07-08",
          isEdit: false,
          isDelete: false,
          isQuery: true,
        },
        {
          id: 2,
          name: "沙龙3",
          unit: "壹基金",
          money: 2000,
          date: "2012-07-08",
          isEdit: false,
          isDelete: false,
          isQuery: true,
        },
        {
          id: 3,
          name: "沙龙4",
          unit: "壹基金",
          money: 2000,
          date: "2012-07-08",
          isEdit: false,
          isDelete: false,
          isQuery: true,
        },
      ];

      // 视图更新方法
      function render() {
        var res = "";
        for (var i = 0; i < data.length; i++) {
          var item = data[i]; // 缓存当前循环的数据
          if (!item.isDelete && item.isQuery) {
            res += `
            <tr class="item" id="${item.id}">
              <td>${item.id}</td>
              <td>
                <input type="text" value="${item.name}" style="display: ${
              item.isEdit ? "" : "none"
            };"/>
                <span style="display: ${item.isEdit ? "none" : ""};">${
              item.name
            }</span>
              </td>
              <td>
                ${
                  item.isEdit
                    ? `<select>
                                  <option value="壹基金" selected="${
                                    item.unit === "壹基金"
                                  }">壹基金</option>
                                  <option value="中华慈善总会" selected="${
                                    item.unit === "中华慈善总会"
                                  }">中华慈善总会</option>
                                </select>`
                    : `<span>${item.unit}</span>`
                }
              </td>
              <td>
                ${
                  item.isEdit
                    ? `<input type="text" value="${item.money}" />`
                    : `<span>${(+item.money).toFixed(2)}</span>`
                }
              </td>
              <td>
                ${
                  item.isEdit
                    ? `<input type="text" value="${item.date}" />`
                    : `<span>${item.date}</span>`
                }
              </td>
              <td>
                ${
                  item.isEdit
                    ? `<a href="javascript:;" onclick="handleConfirm(${item.id})">确定</a> | <a href="javascript:;" onclick="handleCancel(${item.id})">取消</a>`
                    : `<a href="javascript:;" onclick="handleEdit(${item.id})" >修改</a> | <a href="javascript:;" onclick="handleDelete(${item.id})">删除</a>`
                }
              </td>
            </tr>
          `;
          }
        }
        document.querySelector("tbody").innerHTML = res;
      }
      // 页面一加载就渲染视图
      render();

      //每次操作数据后要重新把修改后的数据保存到本地存储中
      function updateLocalData(data) {
        localStorage.setItem("data", JSON.stringify(data));
      }

      // 编辑按钮
      function handleEdit(id) {
        console.log(id);
        for (var i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            // 找到当前点击的是哪一行了
            data[i].isEdit = true;
          }
        }
        updateLocalData(data); // 更新本地存储中的数据
        render(); // 更新视图
      }

      // 删除按钮
      function handleDelete(id) {
        if (confirm("删除后将无法恢复，确认要删除吗")) {
          for (var i = 0; i < data.length; i++) {
            if (data[i].id === id) {
              // 找到当前点击的是哪一行了
              data[i].isDelete = true;
            }
          }
          updateLocalData(data); // 更新本地存储中的数据
          render(); // 更新视图
        }
      }

      // 确定按钮
      function handleConfirm(id) {
        console.log(id);
        for (var i = 0; i < data.length; i++) {
          var item = data[i]; // 当前行的数据
          if (data[i].id === id) {
            // 找到当前点击的是哪一行了
            var current = document.getElementById(id + "");
            // 获取修改后的值
            var name = current.children[1].children[0].value; // 捐赠人
            var unit = current.children[2].children[0].value; // 受捐单位
            var money = current.children[3].children[0].value; // 金额
            var date = current.children[4].children[0].value; // 日期
            // 更新到数据中
            item.name = name;
            item.unit = unit;
            item.money = money;
            item.data = date;

            data[i].isEdit = false;
          }
        }
        updateLocalData(data); // 更新本地存储中的数据
        render(); // 更新视图
      }

      // 取消按钮
      function handleCancel(id) {
        console.log(id);
        for (var i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            // 找到当前点击的是哪一行了
            data[i].isEdit = false;
          }
        }
        render(); // 更新视图
      }

      // 查询按钮
      document.querySelector("#search").addEventListener("click", function () {
        var unitSearchVal = document.querySelector("#unitSearch").value;
        for (var i = 0; i < data.length; i++) {
          var item = data[i]; // 当前循环数据
          if (item.unit === unitSearchVal) {
            // 只查询指定的数据，其它数据不显示
            item.isQuery = true;
          } else {
            item.isQuery = false;
          }
          if (unitSearchVal === "") {
            // 如果是请选择默认显示所有数据
            item.isQuery = true;
          }
        }
        updateLocalData(data); // 更新本地存储中的数据
        render(); // 更新视图
      });

      // 新增按钮
      document.querySelector("#add").addEventListener("click", function () {
        // 把添加的数据包装成一个对象
        var obj = {
          id: data.length,
          name: document.querySelector("#name").value,
          unit: document.querySelector("#unit").value,
          money: +document.querySelector("#money").value,
          date: document.querySelector("#date").value,
          isEdit: false,
          isDelete: false,
          isQuery: true,
        };
        data.push(obj); // 往数组中添加一条数据
        updateLocalData(data); // 更新本地存储中的数据
        render(); // 更新视图
      });
    </script>
  </body>
</html>
